<template>
  <div>
    <div class="login-bd email-bd">
      <input type="text" placeholder="请输入账号" id="email" class="ipt" />
      <input type="password" placeholder="请输入密码" id="pwd" class="ipt" />
      <div class="note">
        <div class="auto">
          <input type="checkbox" name="auto" id="" /><label for="auto">自动登录</label>
        </div>
        <div class="forget">
          <a href="https://id.163.com/mail/retrievepassword#/verifyAccount">忘记密码?</a>
        </div>
      </div>
      <a href="javascript::" class="u-btn2 login-btn" @click="$Message({msg:'功能未开发'})"><div class="u-btn2">登录</div></a>
    </div>
    <div class="footer">
      <a href="javascript:;" @click="$parent.loginMethod = 'other'" class="to-other"
        >&lt; 其他登录方式</a
      >
    </div>
  </div>
</template>
<script></script>
<style lang="less" scoped>
.login-bd {
  // position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  margin: 20px 0;
  // padding: 25px 40px;
  width: 100%;
  height: 270px;
}
.email-bd {
  margin: 0 auto;
  padding: 30px 0 43px;
  width: 220px;
  height: 224px;
  .ipt {
    position: relative;
    margin: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border: 1px solid #cdcdcd;
    border-radius: 2px;
    z-index: 11;
    // box-sizing: content-box;
  }
  .note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .auto {
      input {
        vertical-align: middle;
      }
    }
  }
}
</style>
